<div class="main-content">
    <div class="box">
        <nz-card nzTitle="管理处用水计划上报" class="card" [nzExtra]="urgeBtn">
            <div class="box1">
                <div class="l-box" nz-card-grid>
                    <div class="info">
                        <div nz-card-grid class="info-content">
                            <p>已报送</p>
                            <p>{{glcFinishedNum}}</p>
                        </div>
                        <div nz-card-grid class="info-content">
                            <p>未报送</p>
                            <p style="color: #ff0000">{{glcUnfinishedNum}}</p>
                        </div>
                        <div nz-card-grid class="info-content">
                            <p>报送进度</p>
                            <p>{{glcPercentage ? glcPercentage : '--'}}%</p>
                        </div>
                    </div>
                    <div class="pie-content">
                        <nz-progress [nzPercent]="glcPercentage" nzType="circle" [nzWidth]="160" [nzStrokeWidth]="10" [nzFormat]="formatPercentage"></nz-progress>
                    </div>
                </div>
                <div class="r-box detail-content" nz-card-grid>
                    <nz-table class="table-box" #glcTable nzBordered [nzData]="glcTableData1" [nzFrontPagination]="false" [nzShowPagination]="false" nzSize="small">
                        <thead>
                            <tr>
                                <th>管理处</th>
                                <th nzWidth="100px">报送状态</th>
                                <th nzWidth="130px">报送时间
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of glcTable.data">
                                <td>{{ row.manage_name }}</td>
                                <td [ngClass]="{'green': row.state === '1', 'red': row.state === '0'}">
                                    {{ row.state === '0' ? '未报送' : '已报送' }}
                                </td>
                                <td>
                                    {{row.up_date}}
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                    <nz-table class="table-box" #glcTable2 nzBordered [nzData]="glcTableData2" [nzFrontPagination]="false" [nzShowPagination]="false" nzSize="small">
                        <thead>
                            <tr>
                                <th>管理处</th>
                                <th nzWidth="100px">报送状态</th>
                                <th nzWidth="130px">报送时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of glcTable2.data">
                                <td>{{ row.manage_name }}</td>
                                <td [ngClass]="{'green': row.state === '1', 'red': row.state === '0'}">
                                    {{ row.state === '0' ? '未报送' : '已报送' }}
                                </td>
                                <td>
                                    {{row.up_date}}
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                </div>
            </div>
            <ng-template #urgeBtn>
                <button nz-button nzType="primary" (click)="sendToMng()">一键催报</button>
            </ng-template>
        </nz-card>
    </div>

</div>